<template>
    <div>
  <div class="user_manager">
    <div class="query_form">
        <el-form :inline="true" :model="user" class="demo-form-inline">
    <el-form-item label="用户ID">
      <el-input v-model="user.userId"  placeholder="请输入用户ID" />
    </el-form-item>
      <el-form-item label="用户名称" prop="state">
      <el-input v-model="user.userName" placeholder="请输入用户名称" />
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="user.state" placeholder="试用期">
        <el-option label="所有" :value="0" />
        <el-option label="在职" :value="1" />
        <el-option label="离职" :value="2" />
        <el-option label="试用期" :value="3" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
    </div>
    <div class="base_table">
      <div class="action">
        <el-button type="primary" @click="userCreate">新增</el-button>
        <el-button type="danger">批量删除</el-button>
      </div>
       <el-table
    ref="multipleTableRef"
    :data="userList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column v-for="item in columns" 
    :key="item.prop"
    :prop="item.prop"
    :label="item.label"
    :formatter="item.formatter">
     
    </el-table-column>
    <el-table-column label="操作" min-width="120">
     <template #default="scope">
    <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" @click="Delete(scope.row)">删除</el-button>
     </template>
    </el-table-column>
     
  </el-table>
    </div>
  </div>
   <el-dialog v-model="showModel" title="新增用户">
    <el-form :model="form"
    ref="dialogForm"
    :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="form.userName" autocomplete="off" />
      </el-form-item>
        <el-form-item label="用户邮箱" prop="userEmail">
        <el-input v-model="form.userEmail" autocomplete="off" />
      </el-form-item>
        <el-form-item label="号码" prop="mobile">
        <el-input v-model="form.mobile" autocomplete="off" />
      </el-form-item>
        <el-form-item label="用户角色" prop="userRole">
        <el-input v-model="form.userRole" autocomplete="off" />
      </el-form-item>  
      <el-form-item label="用户状态" prop="userState">
        <el-select v-model="form.userState" placeholder="状态">
          <el-option label="在职" :value="1" />
          <el-option label="离职" :value="2" />
          <el-option label="试用期" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="系统角色" prop="roleList" label-width="100px">
          <el-select
            v-model="form.roleList"
            multiple
            placeholder="选择用户角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in roleList"
              :key="item._id"
              :label="item.roleName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="form.deptId"
            label-width="100px"
            :options="deptList"
            :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
            placeholder="请选择你的部门"
            clearable
          />
        </el-form-item>
    </el-form>
     <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>  
    </div>
</template>
<script setup>
import api from "./../api"
import{ref,reactive,nextTick,toRaw} from 'vue'
import utiles from "./../utils/utiles"
let checkedArr = ref([])
const handleSelectionChange=async(list)=>{
// list是一个数组 ，勾选过的数组
// 每个元素的id的放在一个数组中
// 把所有id放在一个数组中
let arr = []
list.forEach(ele=>{
arr.push(ele.userId) 
})
await api.userDelete({userIds:arr})
getUsersList()
}
// 定义用户行为初始化
const action=ref('add')
// 定义校验规则
const rules=reactive({
    userName:{
        required:true,
        message:"请输入用户名",
        trigger:'blur'
    },
    userEmail:{
        required:true,
        message:"请输入邮箱",
        trigger:'blur'
    },
    userPhone:{
        pattern:/1[3-9]\d{9}/,
        message:"请输入正确的手机号码",
        trigger:'blur'
    }
}
   )
// 定义dialogForm节点
const dialogForm=ref(null)
// 定义角色列表
const roleList=ref([])
// 定义部门列表
const deptList=ref([])
// 定义新增模块用户
const form=reactive({
    state:2
})
const query=()=>{
  console.log(userList);
  getUsersList()
}
const reset=()=>{
  console.log(reset);
  getUsersList()
}
// 定义弹窗
const showModel=ref(false)
// 定义动态表格--格式
const columns=reactive([
    {
        label:"用户Id",
        prop:"userId"
    },
      {
        label:"用户名",
        prop:"userName"
    },  {
        label:"用户邮箱",
        prop:"userEmail"
    },  {
        label:"用户角色",
        prop:"role",
        formatter(row,column,value){
            return{
                0:'管理员',
                1:'普通用户'
            }[value]
        }
    },  {
        label:"用户状态",
        prop:"state",
         formatter(row,column,value){
            return{
                1:'在职',
                2:'离职',
                3:'试用期'
            }[value]
        }
    },
     {
        label:"注册时间",
        prop:"createTime",
        formatter:(row,column,value)=>{
         return utiles.formateDate(new Date(value))  
        }
    }, 
    {
        label:"最后登录时间",
        prop:"lastLoginTime",
         formatter:(row,column,value)=>{
         return utiles.formateDate(new Date(value))  
        }
    },
])
// 定义初始化用户分类
const user=reactive({
    state:1
})
// 定义初始化的分页设置
const pager=reactive({
    pageNum:1,
    pageSize:350,
})
//定义用户列表
const userList=ref([])
const getUsersList=async()=>{
    let params={...user,...pager}
    let {list,page}=await api.getUsersList(params)
    userList.value=list;
}
getUsersList()
// 定义创建用户按钮事件
const userCreate=()=>{
    action.value="add"
    showModel.value=!showModel.value
}
// 获取角色列表
const getRoleList=async()=>{
   roleList.value=await api.getRoleList()
    // console.log(res);
}
getRoleList()
// 获取部门列表
const getDeptList=async()=>{
    deptList.value=await api.getDeptList()
    // console.log(res);
}
getDeptList()
// 定义弹窗取消事件
const handleCancel=()=>{
    resetForm()
    showModel.value=!showModel.value
}
// 定义提交事件
const handleSubmit=()=>{
dialogForm.value.validate(async(valid)=>{
    console.log(valid);
    if(valid){
        //发请求
        // 弹窗关闭
        // 重新发送获取用户列表请求，重新渲染数据
    //    form是响应式对象
    let data=toRaw(form)
    console.log(data);
    data.action=action.value
    let res=await api.userOperate(data)
    showModel.value=!showModel.value
    // 重置表单
    resetForm()
    getUsersList()
    }
})
}
// 重置表单事件
const resetForm=()=>{
    dialogForm.value.resetFields()
}
// 定义编辑事件
const edit=(row)=>{
        action.value="edit"
    showModel.value=!showModel.value
    nextTick(()=>{
        Object.assign(form,row)
    })
}
// 定义删除事件
const Delete=async(row)=>{
    let res= await api.userDelete({userIds:[row.userId]})
    console.log(res);
getUsersList()
}

// 定义搜索部分

</script>

<style lang="scss" scoped>

</style>